<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WK科技</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="description" content="致力于打造最大的芯片平台" />
    <meta name="keywords" content="芯片，半导体，集成电路" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      i,
      em {
        font-style: normal;
      }
      ul,
      li {
        list-style: none;
      }
      body {
        background-color: #dadbf8;
      }
      .main {
        display: flex;
        position: absolute;
        top: 16px;
        left: 15px;
        width: 97vw;
        height: 95vh;
        background-color: #fafafc;
        border-radius: 20px;
        overflow: hidden;
      }
      .tab {
        height: 100%;
        width: 15vw;
        background-color: #fafafc;
      }
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .header {
        width: 100%;
        height: 7vh;
        line-height: 7vh;
        background-color: #fafafc;
        border-bottom: 1px solid #fff;
      }
      .header i {
        font-size: 1.6vw;
        margin-left: 1.1vw;
        cursor: pointer;
      }
      .header i:nth-child(2) {
        margin-left: 70vw;
      }
      .big-content {
        position: relative;
        overflow: auto;
        display: flex;
        flex: 1;
        width: 100%;
        background-color: #f2f2f8;
      }
      .content {
        flex: 1;
        /* display: flex; */
        /* justify-content: space-between; */
      }
      .scroll {
        height: 100%;
        width: 1.1vw;
        background-color: #fafafc;
      }
      .logo {
        padding: 10px;
        height: 60px;
        line-height: 60px;
        margin-bottom: 20px;
        border-bottom: 1px solid #fff;
      }
      .out {
        width: 60px;
        height: 60px;
        line-height: 60px;
        overflow: hidden;
        border-radius: 50%;
      }
      .out img {
        width: 107%;
        height: 107%;
        margin-left: -2px;
        margin-top: -2px;
      }
      .chuangjian {
        position: relative;
        width: 90%;
        height: 50px;
        line-height: 50px;
        background-color: #6466e2;
        padding: 0;
        text-align: center;
        color: #fff;
        margin-bottom: 5px;
        border-radius: 10px;
        margin-left: 10px;
        cursor: pointer;
      }
      .box1 {
        display: none;
        position: absolute;
        top: 0;
        right: -130px;
        width: 130px;
        height: 170px;
        padding: 2px 5px 0;
        border-radius: 5px;
        background-color: #fff;
      }
      .box1 em {
        height: 29%;
        width: 100%;
        display: block;
        color: #fff;
        font-size: 14px;
        background-color: #9d9ee6;
      }
      .box1 i {
        display: block;
        font-size: 13px;
        margin-top: -13px;
        height: 5%;
        color: black;
      }
      .chuangjian:hover .box1 {
        z-index: 9;
        display: block;
      }
      .box1 em:hover {
        background-color: #5355c7;
      }
      .tab ul {
        width: 100%;
        height: 100%;
        padding: 10px;
      }

      .tab li {
        position: relative;
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin-bottom: 3px;
        border-radius: 10px;
        padding-left: 20px;
        cursor: pointer;
        font-size: 1.1vw;
        overflow: hidden;
      }
      .tab li div {
        width: 100%;
        height: 4vh;
        line-height: 4vh;
        font-size: 14px;
        margin-left: -0.8vw;
        margin-bottom: 4px;
        border-radius: 10px;
        padding-left: 1.7vw;
        background-color: #5355c7;
      }
      .tab li:hover {
        color: #fff;
        background-color: #5355c7;
      }
      .tab li i {
        margin-right: 0.9vh;
      }
      .xialakuang,
      .xialakuang2,
      .xialakuang3,
      .xialakuang4,
      .xialakuang5 {
        display: block;
        height: 2.7vw;
        font-size: 1vw;
        padding-left: 4vw;
        border-radius: 5px;
        width: 70%;
        cursor: pointer;
        color: #6466e2;
      }
      .xialakuang:hover,
      .xialakuang2:hover,
      .xialakuang3:hover,
      .xialakuang4:hover,
      .xialakuang5:hover {
        color: #16186d;
      }
      .color {
        background-color: #5355c7;
        color: #fff;
      }
    </style>
    <link rel="stylesheet" href="./ylc.css" />
  </head>
  <body>
    <div class="main">
      <!--左边导航栏 -->
      <div class="tab">
        <div class="logo">
          <div class="out">
            <img src="./images/logo4.png" alt="" />
          </div>
        </div>
        <div class="chuangjian">
          创建项目
          <i class="iconfont icon-jia"></i>
        </div>
        <div class="gainian1 xialakuang4 la" style="display: none">
          项目概念
        </div>
        <div class="renwu1 xialakuang4 la" style="display: none">任务列表</div>
        <div class="chuangjian1 xialakuang4 la" style="display: none">
          创建任务
        </div>
        <ul>
          <li class="pan"><i class="iconfont icon-yibiaopan"></i>仪表盘</li>
          <li class="item">
            <i class="iconfont icon-shuxie"></i>
            我的项目
            <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_liebiao xialakuang kapian la" style="display: none">
            项目
          </div>
          <div class="liebiao xialakuang kapian la" style="display: none">
            列表显示
          </div>
          <div class="renwu2 xialakuang la" style="display: none">任务管理</div>
          <div class="wenjian2 xialakuang la" style="display: none">
            文件管理
          </div>
          <div class="gainian2 xialakuang la" style="display: none">
            概念动态
          </div>
          <div class="tongji xialakuang la" style="display: none">统计</div>
          <li class="renwu">
            <i class="iconfont icon-renwu"></i>我的任务
            <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_renwu xialakuang5 la" style="display: none">
            任务
          </div>
          <div class="bianji xialakuang5 la" style="display: none">
            编辑任务
          </div>
          <li class="baobiao">
            <i class="iconfont icon-baobiao"></i>报表管理
            <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_baobiao xialakuang2 la" style="display: none">报表</div>

          <div class="fenbu xialakuang2 la" style="display: none">任务分布</div>
          <div class="jinzhan xialakuang2 la" style="display: none">
            任务进展
          </div>
          <li class="xitong">
            <i class="iconfont icon-xitongshezhi"></i>系统设置
            <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="xiaoxi xialakuang3 la" style="display: none">
            消息管理
          </div>
          <div class="rizhi xialakuang3 la" style="display: none">日志管理</div>
        </ul>
      </div>
      <!-- 右边大版块-->
      <div class="right">
        <div class="header">
          <i class="iconfont icon-liebiao2"></i>
          <i class="iconfont icon-Magnifier"></i>
          <i class="iconfont icon-xiaoxi"></i>
        </div>
        <div class="big-content">
          <!--------------------内容写在这里---- -->
          <div class="content">
            <div class="content-box">
              <!-- 项目名称 -->
              <div class="content-left">
                <div class="project-top">
                  <ul>
                    <li>
                      <h3>
                        <img
                          src="./images/logo4.png"
                          alt=""
                        />项目名称：电子项目1
                      </h3>
                      <p>创建人：李威威</p>
                      <p>创建时间：2020-01-10</p>
                      <p>立项日期：2020-01-10</p>
                    </li>
                    <li>
                      <p>项目描述：XX 服务</p>
                      <p>项目编号：<span>1688888</span></p>
                      <p>备注：请于两个工作日前确认</p>
                    </li>
                  </ul>
                </div>
                <div class="project-down">
                  <ul>
                    <li>任务</li>
                    <li>文件</li>
                    <li class="projectActive">概览</li>
                    <li>统计</li>
                  </ul>
                </div>
              </div>
              <div class="content-right">
                <ul>
                  <li>
                    <div>
                      <span>进行中</span><i class="iconfont">&#xe606;</i>
                    </div>
                    <div>8</div>
                    <div><em></em></div>
                  </li>
                  <li>
                    <div>
                      <span>进行中</span><i class="iconfont">&#xe606;</i>
                    </div>
                    <div>6</div>
                    <div><em></em><img src="./images/u363.png" alt="" /></div>
                  </li>
                  <li>
                    <div>
                      <span>进行中</span><i class="iconfont">&#xe606;</i>
                    </div>
                    <div>3</div>
                    <div><em></em><img src="./images/u341.png" alt="" /></div>
                  </li>
                  <li>
                    <div>
                      <span>进行中</span><i class="iconfont">&#xe606;</i>
                    </div>
                    <div>8</div>
                    <div><em></em><img src="./images/u319.png" alt="" /></div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="content-xianmu">
              <!-- 项目号 -->
              <div class="content-xianmu-left">
                <div>
                  <span>项目号：</span
                  ><input type="text" name="" placeholder="26359826" id="" />
                </div>
                <div>
                  <span>起止日期:</span
                  ><input type="date" class="" name="" id="datetime" /> ~<input
                    type="date"
                    class=""
                    name=""
                    id="datetime"
                  />
                </div>
                <div>
                  <span>项目备注：</span>
                  <textarea
                    name=""
                    id=""
                    cols="30"
                    placeholder="请输入你的阶段性工作目标"
                    rows="5"
                  ></textarea>
                </div>
                <div>
                  <span>优先级：</span
                  ><select name="">
                    <option value="">普通</option>
                    <option value="">不普通</option>
                  </select>
                </div>
                <div>任务:</div>
                <div class="addTask">+ 添加任务</div>
                <div>相关内容：</div>
                <div class="addResources">+ 添加资源</div>
                <div>
                  <span>临时产品：</span>
                  <textarea
                    name=""
                    id=""
                    placeholder="请输入备注"
                    cols="30"
                    rows="5"
                  ></textarea>
                </div>
                <div>
                  <span>正式产品：</span>
                  <textarea
                    name=""
                    id=""
                    cols="30"
                    placeholder="请输入备注"
                    rows="5"
                  ></textarea>
                </div>
                <div>
                  <span>项目成员：</span>
                  <textarea
                    name=""
                    id=""
                    cols="30"
                    placeholder="Sean、QE、PE、LAB"
                    rows="5"
                  ></textarea>
                </div>
                <div>
                  <button class="save">保存</button>
                  <button class="submit">提交</button>
                </div>
              </div>
              <!-- 动态 -->
              <div class="content-xianmu-right">
                <div>动态</div>
                <div>
                  <img
                    src="https://img.axureshop.com/f2/fb/cd/f2fbcd26e8434d5488d3ef239ea2f821/images/概览动态/u3747.jpg"
                    alt=""
                  />
                  <i>威威</i> 创建了<span>任务设计图纸</span>
                  <em>刚刚</em>
                </div>
                <div>
                  <img
                    src="https://img.axureshop.com/f2/fb/cd/f2fbcd26e8434d5488d3ef239ea2f821/images/概览动态/u3747.jpg"
                    alt=""
                  />
                  <i>慈慈</i> 更新了<span>任务文件</span>
                  <em>刚刚</em>
                </div>
                <div>
                  <img
                    src="https://img.axureshop.com/f2/fb/cd/f2fbcd26e8434d5488d3ef239ea2f821/images/概览动态/u3747.jpg"
                    alt=""
                  />
                  <i>阳阳</i> 完成了<span>任务</span>
                  <em>刚刚</em>
                </div>
                <div class="releaseCn"></div>
                <div class="releaseCn2"></div>
                <div>
                  <textarea
                    class="tx"
                    name=""
                    id=""
                    cols="70"
                    placeholder="@提及他人，按Enter键快捷发布"
                    rows="7"
                  ></textarea
                  ><button class="release">发布</button>
                </div>
              </div>
            </div>
          </div>
          <!------------------------------------->
          <div class="scroll"></div>
        </div>
      </div>
    </div>
    <!-- ----------------------------------script------------------------------------------>
    <script src="./ylcgailan.js"></script>
    <script>
      const li = document.querySelectorAll(".tab li");
      li.forEach((el) => {
        el.addEventListener("click", function (e) {
          console.log(el);
          if (e.target.tagName !== "LI") return;
          const old = document.querySelector(".color"); // 有特殊样式的元素
          old && old.classList.remove("color"); //没有就不清除,有就清除
          e.target.classList.add("color");
        });
      });
      const la = document.querySelectorAll(".la");
      //创建项目下拉框
      let flag4 = true;
      const chuangjian = document.querySelector(".chuangjian");
      const xialakuang4 = document.querySelectorAll(".xialakuang4");
      chuangjian.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none";
        });
        if (flag4) {
          xialakuang4.forEach((el) => {
            el.style.display = "block";
          });
          flag4 = false;
        } else {
          xialakuang4.forEach((el) => {
            el.style.display = "none";
          });
          flag4 = true;
        }
      };
      //项目下拉框
      let flag = true;
      const item = document.querySelector(".item");
      const xialakuang = document.querySelectorAll(".xialakuang");
      item.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none";
        });
        if (flag) {
          xialakuang.forEach((el) => {
            el.style.display = "block";
          });
          flag = false;
        } else {
          xialakuang.forEach((el) => {
            el.style.display = "none";
          });
          flag = true;
        }
      };
      // 我的任务
      let flag5 = true;
      const renwu = document.querySelector(".renwu");
      const xialakuang5 = document.querySelectorAll(".xialakuang5");
      renwu.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none";
        });
        if (flag5) {
          xialakuang5.forEach((el) => {
            el.style.display = "block";
          });
          flag5 = false;
        } else {
          xialakuang5.forEach((el) => {
            el.style.display = "none";
          });
          flag5 = true;
        }
      };
      //报表下拉框
      let flag2 = true;
      const baobiao = document.querySelector(".baobiao");
      const xialakuang2 = document.querySelectorAll(".xialakuang2");
      baobiao.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none";
        });
        if (flag2) {
          xialakuang2.forEach((el) => {
            el.style.display = "block";
          });
          flag2 = false;
        } else {
          xialakuang2.forEach((el) => {
            el.style.display = "none";
          });
          flag2 = true;
        }
      };
      //   系统管理下拉框
      let flag3 = true;
      const xitong = document.querySelector(".xitong");
      const xialakuang3 = document.querySelectorAll(".xialakuang3");
      xitong.onclick = function (e) {
        la.forEach((el) => {
          el.style.display = "none";
        });
        if (flag3) {
          xialakuang3.forEach((el) => {
            el.style.display = "block";
          });
          flag3 = false;
        } else {
          xialakuang3.forEach((el) => {
            el.style.display = "none";
          });
          flag3 = true;
        }
      };
      // 大排它，点击某个导航栏，其他导航栏都收起
    </script>
    <script src="./dianji.js"></script>

  </body>
</html>
